Estrategias de Caché Frontend: Caché HTTP y Caché de Service Worker

En el mundo del desarrollo web, optimizar el rendimiento del sitio web es primordial. Un sitio web lento puede generar usuarios frustrados, tasas de rebote más altas y, en última instancia, un impacto negativo en su negocio. El almacenamiento en caché, una técnica para almacenar y reutilizar recursos recuperados previamente, juega un papel vital para mejorar la velocidad del sitio web y reducir la carga del servidor. Este artículo proporciona una descripción general completa de dos estrategias clave de almacenamiento en caché frontend: el almacenamiento en caché HTTP y el almacenamiento en caché de Service Worker.

Comprensión de los Fundamentos del Almacenamiento en Caché

El almacenamiento en caché implica almacenar copias de recursos, como HTML, CSS, JavaScript, imágenes y otros activos, más cerca del usuario. Cuando un usuario solicita un recurso, el navegador o un intermediario de almacenamiento en caché primero verifica si hay una copia en caché disponible. Si lo hay (un "acierto de caché"), el recurso se sirve desde la caché, evitando un viaje al servidor de origen. Esto reduce significativamente la latencia y mejora los tiempos de carga.

Hay varios niveles de almacenamiento en caché, incluido el caché del navegador, el caché proxy y el caché del lado del servidor. Este artículo se centra en el almacenamiento en caché frontend, específicamente en cómo aprovechar el caché HTTP incorporado del navegador y el caché de Service Worker más avanzado.

Caché HTTP: Aprovechando las Capacidades del Navegador

El almacenamiento en caché HTTP es el mecanismo integrado del navegador para almacenar y recuperar recursos. Está controlado por los encabezados HTTP enviados por el servidor en la respuesta a una solicitud. Estos encabezados proporcionan instrucciones al navegador sobre cuánto tiempo almacenar en caché un recurso y en qué condiciones debe considerarse válido.

Encabezados Clave de Caché HTTP

• Cache-Control: Este es el encabezado más importante para controlar el almacenamiento en caché HTTP. Le permite especificar varias directivas, tales como:
• max-age=segundos: Especifica el tiempo máximo que un recurso se considera fresco. Después de este tiempo, el navegador debe volver a validar el caché con el servidor. Ejemplo: Cache-Control: max-age=3600 (caché durante 1 hora).
• s-maxage=segundos: Similar a max-age, pero se aplica específicamente a cachés compartidas como las CDN. Ejemplo: Cache-Control: max-age=3600, s-maxage=86400 (caché durante 1 hora en el navegador, 1 día en una CDN).
• public: Indica que la respuesta puede ser almacenada en caché por cualquier caché, incluidas las cachés compartidas.
• private: Indica que la respuesta solo puede ser almacenada en caché por el navegador y no por las cachés compartidas. Útil para datos específicos del usuario.
• no-cache: Obliga al navegador a volver a validar el caché con el servidor antes de usarlo, incluso si todavía está fresco.
• no-store: Evita que el navegador almacene en caché la respuesta por completo.
• Expires: Un encabezado más antiguo que especifica una fecha y hora absolutas en que el recurso caduca. Cache-Control generalmente reemplaza a Expires si ambos están presentes. Ejemplo: Expires: Wed, 21 Oct 2024 07:28:00 GMT
• ETag: Un identificador único para una versión específica de un recurso. El navegador envía el ETag en el encabezado de solicitud If-None-Match durante la revalidación. Si el recurso no ha cambiado, el servidor devuelve una respuesta 304 Not Modified, lo que indica que el navegador puede usar la versión en caché.
• Last-Modified: Indica la última vez que se modificó el recurso. El navegador envía la fecha de Last-Modified en el encabezado de solicitud If-Modified-Since durante la revalidación. Similar a ETag, el servidor puede devolver una respuesta 304 Not Modified si el recurso no ha cambiado.

Ejemplos Prácticos de Caché HTTP

Ejemplo 1: Almacenamiento en caché de activos estáticos (imágenes, CSS, JavaScript):

Para los activos estáticos que rara vez cambian, puede establecer un valor max-age largo:

            Cache-Control: public, max-age=31536000  

            

              
                Copy
              
            
          

Esto le dice al navegador que almacene en caché el recurso durante un año (31,536,000 segundos) y que puede ser almacenado en caché por cualquier caché (public).

Ejemplo 2: Almacenamiento en caché de contenido dinámico con revalidación:

Para el contenido dinámico que cambia con más frecuencia, puede usar no-cache junto con ETag o Last-Modified para la revalidación:

            Cache-Control: no-cache, must-revalidate
ETag: "unique-etag-value"

            

              
                Copy
              
            
          

Esto obliga al navegador a volver a validar el caché con el servidor antes de usarlo. Luego, el servidor puede usar el ETag para determinar si el recurso ha cambiado y devolver una respuesta 304 Not Modified si no lo ha hecho.

Ejemplo 3: Sirviendo activos versionados:

Una práctica común es incluir un número de versión en el nombre del archivo del activo (por ejemplo, style.v1.css). Cuando el activo cambia, actualiza el número de versión, lo que obliga al navegador a descargar la nueva versión. Esto le permite almacenar en caché de forma agresiva los activos sin preocuparse por servir contenido obsoleto.

Mejores Prácticas para el Almacenamiento en Caché HTTP

• Use una CDN: Las redes de entrega de contenido (CDN) distribuyen el contenido de su sitio web a través de múltiples servidores geográficamente más cerca de los usuarios. Esto reduce la latencia y mejora los tiempos de carga, especialmente para los usuarios en diferentes partes del mundo. Las CDN populares incluyen Cloudflare, Akamai y Amazon CloudFront. Un sitio web en Japón que carga imágenes desde un servidor en Europa se beneficiará enormemente de una CDN con servidores en Asia.
• Aproveche el almacenamiento en caché del navegador: Configure su servidor para que envíe los encabezados de caché HTTP adecuados para todos sus recursos.
• Use técnicas de invalidación de caché: Emplee técnicas como el versionado o los parámetros de consulta para obligar a los navegadores a descargar los recursos actualizados cuando cambian.
• Supervise el rendimiento del caché: Use las herramientas para desarrolladores del navegador y el análisis del lado del servidor para supervisar las tasas de aciertos de caché e identificar áreas de mejora.

Caché de Service Worker: Control Avanzado y Capacidades Sin Conexión

Los Service Workers son archivos JavaScript que se ejecutan en segundo plano, separados del hilo principal del navegador. Actúan como un proxy entre el navegador y la red, lo que le permite interceptar las solicitudes de red e implementar estrategias avanzadas de almacenamiento en caché.

Los Service Workers son una tecnología clave detrás de las aplicaciones web progresivas (PWA), que habilitan funciones como el acceso sin conexión, las notificaciones push y la sincronización en segundo plano.

Cómo Funcionan los Service Workers

1. Registro: El Service Worker es registrado por su página web.
2. Instalación: El Service Worker se instala en el navegador. Aquí es donde normalmente prealmacena en caché los recursos esenciales.
3. Activación: El Service Worker se activa y comienza a controlar las solicitudes de red para las páginas dentro de su alcance.
4. Intercepción: El Service Worker intercepta las solicitudes de red y puede optar por servir recursos desde el caché, buscarlos en la red o incluso crear una respuesta sintética.

API Clave de Service Worker para el Almacenamiento en Caché

• API de Cache: Proporciona un mecanismo para almacenar y recuperar respuestas en caché. Le permite crear cachés con nombre y agregar, actualizar y eliminar entradas.
• API de Fetch: Se utiliza para realizar solicitudes de red desde el Service Worker.
• addEventListener('install', ...): El controlador de eventos que se ejecuta cuando se instala por primera vez el service worker. Esto se usa comúnmente para prealmacenar en caché activos importantes.
• addEventListener('activate', ...): El controlador de eventos que se ejecuta cuando el service worker se activa. Esto se usa comúnmente para limpiar cachés antiguas.
• addEventListener('fetch', ...): El controlador de eventos que intercepta las solicitudes de red. Aquí es donde reside la lógica de almacenamiento en caché.

Estrategias de Almacenamiento en Caché con Service Workers

Los Service Workers le permiten implementar varias estrategias de almacenamiento en caché adaptadas a diferentes tipos de recursos y condiciones de red. Aquí hay algunas estrategias comunes:

• Cache First: Siempre sirva el recurso desde el caché si está disponible. Si no está en el caché, búscalo en la red y guárdalo en el caché para su uso futuro. Esto es ideal para activos estáticos que rara vez cambian.
• Network First: Siempre intente buscar el recurso primero en la red. Si la red está disponible, sirva el recurso y actualice el caché. Si la red no está disponible, sirva el recurso desde el caché. Esto es adecuado para contenido dinámico que debe estar lo más actualizado posible.
• Cache, then Network: Sirva el recurso desde el caché inmediatamente mientras busca simultáneamente la última versión de la red. Actualice el caché con la nueva versión cuando llegue. Esto proporciona una carga inicial rápida y garantiza que el usuario obtenga el contenido más reciente eventualmente.
• Stale-While-Revalidate: Sirva el recurso desde el caché inmediatamente. En segundo plano, busque la última versión de la red y actualice el caché. La próxima vez que se solicite el recurso, se servirá la versión actualizada. Esta estrategia proporciona una carga inicial rápida y garantiza que el usuario siempre obtenga la versión más reciente eventualmente, sin bloquear la solicitud inicial.
• Network Only: Siempre busque el recurso en la red. Nunca use el caché. Esto es apropiado para los recursos que nunca deben almacenarse en caché, como los datos confidenciales del usuario.
• Cache Only: Siempre sirva el recurso desde el caché. Nunca lo busque en la red. Esto es útil para escenarios en los que desea asegurarse de que el recurso esté siempre disponible sin conexión.

Ejemplos Prácticos de Almacenamiento en Caché de Service Worker

Ejemplo 1: Estrategia Cache First para activos estáticos:

            self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(response => {
        // Cache hit - return response
        if (response) {
          return response;
        }

        // Not in cache - fetch from network
        return fetch(event.request).then(
          response => {
            // Check if we received a valid response
            if (!response || response.status !== 200 || response.type !== 'basic') {
              return response;
            }

            // IMPORTANT: Clone the response. A response is a stream
            // and because we want the browser to consume the response
            // as well as the cache consuming the response, we need
            // to clone it.
            const responseToCache = response.clone();

            caches.open('my-site-cache')
              .then(cache => {
                cache.put(event.request, responseToCache);
              });

            return response;
          }
        );
      })
  );
});

            

              
                Copy
              
            
          

Este fragmento de código demuestra la estrategia Cache First. El Service Worker primero verifica si el recurso solicitado está disponible en el caché. Si lo está, sirve el recurso desde el caché. Si no lo está, busca el recurso en la red, lo guarda en el caché y luego lo sirve al navegador.

Ejemplo 2: Estrategia Stale-While-Revalidate para contenido dinámico:

            self.addEventListener('fetch', event => {
  event.respondWith(
    caches.open('my-site-cache').then(cache => {
      return cache.match(event.request).then(response => {
        const fetchPromise = fetch(event.request).then(networkResponse => {
          cache.put(event.request, networkResponse.clone());
          return networkResponse;
        });
        return response || fetchPromise;
      })
    })
  );
});

            

              
                Copy
              
            
          

Este fragmento de código demuestra la estrategia Stale-While-Revalidate. El Service Worker sirve el recurso desde el caché inmediatamente. En segundo plano, busca la última versión de la red y actualiza el caché. La próxima vez que se solicite el recurso, se servirá la versión actualizada.

Mejores Prácticas para el Almacenamiento en Caché de Service Worker

• Use una biblioteca de estrategias de almacenamiento en caché: Bibliotecas como Workbox simplifican el desarrollo de Service Worker al proporcionar estrategias y utilidades de almacenamiento en caché preconstruidas. Esto puede ahorrarle tiempo y esfuerzo y garantizar que su lógica de almacenamiento en caché sea robusta y confiable.
• Administre las versiones del caché: Cuando actualiza su Service Worker, necesita invalidar el caché anterior y crear uno nuevo. Esto evita servir recursos obsoletos. Use el evento activate para limpiar cachés antiguas.
• Maneje los errores con elegancia: Implemente el manejo de errores para manejar con elegancia las fallas de la red y los errores de caché. Proporcione contenido de respaldo o informe al usuario que el recurso no está disponible.
• Pruebe a fondo: Pruebe su lógica de almacenamiento en caché de Service Worker en diferentes condiciones de red y entornos de navegador para asegurarse de que funcione como se espera. Use las herramientas para desarrolladores del navegador para inspeccionar el caché y supervisar las solicitudes de red.
• Considere la experiencia del usuario: Diseñe su estrategia de almacenamiento en caché teniendo en cuenta la experiencia del usuario. Proporcione comentarios al usuario cuando se busque un recurso de la red o del caché. Evite servir contenido obsoleto durante demasiado tiempo.

Comparación del Caché HTTP y el Caché de Service Worker

Si bien tanto el almacenamiento en caché HTTP como el almacenamiento en caché de Service Worker tienen como objetivo mejorar el rendimiento del sitio web, difieren en sus capacidades y casos de uso.

Consideraciones Globales para el Almacenamiento en Caché

Al implementar estrategias de almacenamiento en caché para una audiencia global, considere lo siguiente:

• Condiciones de la red: Los usuarios en diferentes regiones pueden experimentar diferentes velocidades y confiabilidad de la red. Adapte su estrategia de almacenamiento en caché para adaptarse a estas diferencias. Por ejemplo, los usuarios en áreas con acceso a Internet poco confiable se beneficiarán enormemente de un sólido soporte sin conexión.
• Cobertura de la CDN: Elija una CDN con una red global de servidores para garantizar que su contenido se entregue rápidamente a los usuarios en todas las regiones. Verifique que la CDN tenga puntos de presencia (PoP) en regiones críticas para su audiencia.
• Privacidad de los datos: Tenga en cuenta las regulaciones de privacidad de datos en diferentes países al almacenar en caché datos específicos del usuario. Asegúrese de cumplir con leyes como GDPR y CCPA.
• Idioma y localización: Considere el almacenamiento en caché de versiones localizadas de su sitio web para brindar una mejor experiencia de usuario a los usuarios en diferentes idiomas y regiones.
• Invalidación del caché: Implemente una estrategia de invalidación del caché confiable para garantizar que los usuarios siempre obtengan el contenido más reciente, incluso cuando cambie con frecuencia. Preste especial atención a las actualizaciones de contenido localizado.

Conclusión

El almacenamiento en caché frontend es una técnica esencial para optimizar el rendimiento del sitio web y mejorar la experiencia del usuario. Al aprovechar el almacenamiento en caché HTTP y el almacenamiento en caché de Service Worker, puede reducir significativamente los tiempos de carga, reducir la carga del servidor y proporcionar acceso sin conexión al contenido de su sitio web. Considere cuidadosamente las necesidades específicas de su sitio web y su público objetivo al elegir e implementar estrategias de almacenamiento en caché. Al adoptar las mejores prácticas y supervisar continuamente el rendimiento de su almacenamiento en caché, puede asegurarse de que su sitio web ofrezca una experiencia rápida y confiable a los usuarios de todo el mundo.